<template>
	<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="lowerBottom">
		<uni-list>
			<uni-list-item direction="row" v-for="item in data" :key="item.id"  :to="`/pages/resumption/courseDetail?id=${item.course.course_id}`">
				<template v-slot:body>
					<view class="uni-list-box uni-content">
						<view class="title" style="line-height: 24px; margin: 0px;">
							{{item.course.title}}
							<span class="red" v-if="item.status == 0">【未学习】</span>
							<span class="red" v-if="item.status == 1">【已学完】</span>
							<span class="red" v-if="item.status == 2">【进度{{item.speed}}%】</span>
						</view>
						<!-- <image :src="item.course.image" mode="widthFix" class="topic-image" style="width: 100%;"></image> -->
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-load-more v-if="showLoad" :status="loadStatus" />
		<image src="https://zhzx.on-line-demo.com/image/zwsj.png" mode="aspectFit" class="no-data" v-if="loadStatus == 'no-more' && data.length == 0"></image>
	</scroll-view>
</template>

<script>
	import request from '../../common/request.js'
	export default {
		components: {
			
		},
		data() {
			return {
				data:[],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
			}
		},
		mounted(){
			this.getListData()
		},
		methods: {
			lowerBottom(){
				if(this.loadStatus != 'loading'){
					this.loadStatus = 'loading'
					this.showLoad = true
					this.page++
					this.getListData()
				}
			},
			getListData(){
				request({
					url:'/study/myStudy',
					data:{
						page: this.page,
					},
					method:'POST',
				}).then(res => {
						if(res.code == 1){
							this.data = this.data.concat(res.data)
							if(this.page == res.lastPage){
								this.loadStatus = 'no-more'
							}else{
								this.loadStatus = 'more'
								this.showLoad = false
							}
						}else{
							this.loadStatus = 'no-more'
						}
					})
			},
		}
	}
</script>

<style scoped>
	.uni-content{
		width: 100%;
	}
	
	.red{
		color: #de261d;
	}
</style>